<template>
  <div>
      <Header></Header>
      <div style="margin-left:20%">
        <Detail-context 
        :goodId="goodsId" 
        :goodName="goodName" 
        :goodSoldNum="goodSoldNum"
        :productSkuId="productSkuId"
        :productSkuName="productSkuName"
        :productSkuImg="productSkuImg"
        :productSkuOriginalPrice="productSkuOriginalPrice"
        :productSkuSellPrice="productSkuSellPrice"
        :productSkuStock="productSkuStock"
        :uId="uId"
        ></Detail-context>
        <Goods-params-and-comments></Goods-params-and-comments>
      </div>
  </div>
</template>

<script>
import http from '@/utils/request'
import Header from '@/components/Index/Header'
import DetailContext from '@/components/GoodsDetail/DetailContext.vue'
import GoodsParamsAndComments from '@/components/GoodsDetail/GoodsParamsAndComments.vue'
export default {
  components: {
    Header,
    DetailContext,
    GoodsParamsAndComments  
  },
  data(){
    return {
      goodsId: '',
      goodName: '',
      goodSoldNum: '',
      productSkuId: '',
      productSkuName: '',
      productSkuImg: '',
      productSkuOriginalPrice: '',
      productSkuSellPrice: '',
      productSkuStock: '',
      uId: ''
    }
  },
  mounted(){
    this.goodsId = this.$route.query.id
    this.getGoodsById()
    this.getUserIdByUserName()
  },
  methods: {
    getGoodsById() {
      http.get(`/product/d/${this.goodsId}`)
        .then(res => {
          let goodsDetails = res.data.data
          let productSku = goodsDetails.productSku
          this.goodName = goodsDetails.name
          this.goodSoldNum = goodsDetails.soldNum
          this.productSkuId = productSku.skuId
          this.productSkuName = productSku.skuName
          this.productSkuImg = productSku.skuImg
          this.productSkuOriginalPrice = productSku.originalPrice
          this.productSkuSellPrice = productSku.sellPrice
          this.productSkuStock = productSku.stock
        })
    },
    getUserIdByUserName() {
      if(null != this.$cookies.get('access_token')){
        let tokenString = this.$cookies.get('access_token')
        let user = JSON.parse(decodeURIComponent(escape(window.atob(tokenString.split('.')[1]))))
        let username = user.sub
        http.post('/shopping/user',{
          userName: username
        })
          .then(res => {
            this.uId = res.data.data.userId
          })
      }
    }
  }
}
</script>

<style>
  .header-bar {
      color: #fff; 
      margin-right: 20px;
      float: right;
  }
  .header-bar:hover {
      color: #fff;
  }
</style>